import React, { useRef } from 'react';
import './index.css'; // 引入CSS样式文件

/**
 * 创建一个可滚动的容器组件
 * @param {Array<string>} props.arr - 图片URL数组
 * @returns {JSX.Element} - 可滚动的容器元素
 */
const ScrollableContainer: React.FC<{ arr: string[] }> = ({ arr }) => {
    const containerRef = useRef<HTMLDivElement>(null); // 创建一个React的ref来访问DOM元素

    // 向左滚动函数
    const scrollLeft = () => {
        if (containerRef.current) {
            containerRef.current.scrollBy({ left: -400, behavior: 'smooth' }); // 使用scrollBy方法平滑地向左滚动
        }
    };

    // 向右滚动函数
    const scrollRight = () => {
        if (containerRef.current) {
            containerRef.current.scrollBy({ left: 400, behavior: 'smooth' }); // 使用scrollBy方法平滑地向右滚动
        }
    };

    return (
        <div className="q-scrollable-container">
            <button onClick={scrollLeft} className="q-arrow-button1">◀</button> {/* 左箭头按钮 */}
            <div className="q-custom-scrollbar" ref={containerRef}>
                {/* 映射数组以显示图片 */}
                {arr.map((item, index) => (<img src={item} key={index} alt="draggable" draggable onDragStart={(e) => (e, item)} style={{ cursor: 'move' }} />))}
            </div>
            <button onClick={scrollRight} className="q-arrow-button2">▶</button> {/* 右箭头按钮 */}
        </div>
    );
};

export default ScrollableContainer;